import 'package:flutter/material.dart' hide NestedScrollView;
import 'package:jicaimao_flutter/entity/product_entity.dart';
import 'package:jicaimao_flutter/utils/constants.dart';
import 'package:jicaimao_flutter/views/produt/extended_nested_scroll_view.dart';

class ProductTransactionTab {
  ProductTransactionTab({this.tabName});

  final String tabName;
}

class ProductDetailPage extends StatefulWidget {
  ProductDetailPage({this.product});

  final ProductBean product;

  @override
  _ProductDetailPageState createState() => _ProductDetailPageState();
}

class _ProductDetailPageState extends State<ProductDetailPage>
    with TickerProviderStateMixin {
  TabController primaryTC;

  List<ProductTransactionTab> _tabPages;

  @override
  void initState() {
    // TODO: implement initState
    primaryTC = new TabController(length: 3, vsync: this);
    super.initState();

    this._tabPages = <ProductTransactionTab>[
      ProductTransactionTab(tabName: '申购规则'),
      ProductTransactionTab(tabName: '领取规则'),
      ProductTransactionTab(tabName: '常见问题'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomSheet: GestureDetector(
        onTap: () {},
        child: Container(
          width: double.infinity,
          height: 60.0,
          color: Colors.grey,
          child: Center(
              child: Text(
            '立即申购',
            style: TextStyle(color: Colors.white),
          )),
        ),
      ),
      body: _buildScaffoldBody(),
    );
  }

  Widget _buildScaffoldBody() {
//    final double statusBarHeight = MediaQuery.of(context).padding.top;

    var primaryTabBar = new TabBar(
        labelColor: Colors.black,
        controller: primaryTC,
        tabs: _tabPages
            .map((ProductTransactionTab tab) => Tab(
                  text: tab.tabName,
                ))
            .toList());

    return NestedScrollView(
      headerSliverBuilder: (ctx, f) => _buildSliverHeader(primaryTabBar),
      body: TabBarView(controller: primaryTC, children: <Widget>[
        PurchaseViewPage(),
        ReceiveRulePage(),
        CommonIssuesViewPage(),
      ]),
    );
  }

  List<Widget> _buildSliverHeader(TabBar primaryTabBar) {
    var widgets = <Widget>[];
    widgets.add(SliverAppBar(
      backgroundColor: Color(0xFFE165C7),
      pinned: true,
      title: Text('${widget.product.regularProduct}天定期产品'),
      centerTitle: true,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back_ios,
          color: Colors.white,
        ),
        onPressed: () => Navigator.pop(context),
      ),
    ));

    widgets.add(SliverPersistentHeader(
        pinned: false,
        floating: false,
        delegate: CommonSliverPersistentHeaderDelegate(
            Column(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage(
                              'images/product_detial_page_header_bg.png'),
                          fit: BoxFit.cover)),
                  height: 260.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 40.0),
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: AssetImage(
                                      'images/ic_product_detial_header_center_circle.png'))),
                          height: 130.0,
                          width: 130.0,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text.rich(
                                TextSpan(
                                    text: widget.product.reward.toString(),
                                    style: TextStyle(
                                        color: Colors.white, fontSize: 50.0),
                                    children: <TextSpan>[
                                      TextSpan(
                                          text: '%',
                                          style: TextStyle(fontSize: 20.0))
                                    ]),
                              ),
                              Text(
                                '奖励',
                                style: TextStyle(
                                    color: const Color(0xFFEEBCFF),
                                    fontSize: 16.0),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Column(
                              children: <Widget>[
                                Text(
                                  '5000.00',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20.0),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 10.0),
                                  child: Text(
                                    '最低申购积分',
                                    style: TextStyle(
                                        color: const Color(0xFFEEBCFF),
                                        fontSize: 14.0),
                                  ),
                                ),
                                Text(
                                  'BSC',
                                  style: TextStyle(
                                      color: const Color(0xFFEEBCFF),
                                      fontSize: 14.0),
                                )
                              ],
                            ),
                          ),
                          Container(
                            width: 0.5,
                            height: 36.0,
                            color: Colors.white,
                          ),
                          Expanded(
                            child: Column(
                              children: <Widget>[
                                Text(
                                  '4000.000',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 20.0),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(top: 10.0),
                                  child: Text(
                                    '福利BSC',
                                    style: TextStyle(
                                        color: const Color(0xFFEEBCFF),
                                        fontSize: 14.0),
                                  ),
                                ),
                                Text(
                                  '（按起投金额算）',
                                  style: TextStyle(
                                      color: const Color(0xFFEEBCFF),
                                      fontSize: 14.0),
                                )
                              ],
                            ),
                          )
                        ],
                      )
                    ],
                  ),
                ),
                Container(
                  color: Colors.grey[100],
                  width: 10.0,
                )
              ],
            ),
            260.0)));

    widgets.add(SliverPersistentHeader(
        pinned: true,
        floating: false,
        delegate: CommonSliverPersistentHeaderDelegate(
            Container(
              alignment: Alignment.centerLeft,
              color: Colors.white,
              height: 100.0,
              child: Padding(
                padding: const EdgeInsets.only(left: 20.0),
                child: Text("交易规则"),
              ),
            ),
            primaryTabBar.preferredSize.height)));
    widgets.add(SliverPersistentHeader(
      pinned: true,
      floating: false,
      delegate: CommonSliverPersistentHeaderDelegate(
          primaryTabBar, primaryTabBar.preferredSize.height),
    ));

    return widgets;
  }
}

class CommonSliverPersistentHeaderDelegate
    extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double height;

  CommonSliverPersistentHeaderDelegate(this.child, this.height);

  @override
  double get minExtent => height;

  @override
  double get maxExtent => height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: child,
    );
  }

  @override
  bool shouldRebuild(CommonSliverPersistentHeaderDelegate oldDelegate) {
    //print("shouldRebuild---------------");
    return oldDelegate != this;
  }
}

///
///
///
///
class PurchaseViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('1.T日（T为交易日）当天15:00前申购，T+1日开始计算福利。'),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('2.最低申购积分为5000，单笔及单日转入积分均无上限。'),
          ),

          RuleTimeBar(
            leftStr: purchaseRuleMappingList[0].left,
            rightStr: purchaseRuleMappingList[0].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),

          RuleTimeBar(
            leftStr: purchaseRuleMappingList[1].left,
            rightStr: purchaseRuleMappingList[1].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          RuleTimeBar(
            leftStr: purchaseRuleMappingList[2].left,
            rightStr: purchaseRuleMappingList[2].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),
          RuleTimeBar(
            leftStr: purchaseRuleMappingList[3].left,
            rightStr: purchaseRuleMappingList[3].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          RuleTimeBar(
            leftStr: purchaseRuleMappingList[4].left,
            rightStr: purchaseRuleMappingList[4].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),
          RuleTimeBar(
            leftStr: purchaseRuleMappingList[5].left,
            rightStr: purchaseRuleMappingList[5].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          //todo austenCommit
        ],
      ),
    );
  }
}

///
/// One Page Item
///
///
class RuleTimeBar extends StatelessWidget {
  RuleTimeBar(
      {Key key,
      this.backgroundColor,
      this.padding = const EdgeInsets.all(0.0),
      this.height = 50,
      this.leftStr = '',
      this.centerStr = '',
      this.rightStr = ''})
      : super(key: key);

  final Color backgroundColor;
  final String leftStr;
  final String centerStr;
  final String rightStr;
  final double height;
  final EdgeInsetsGeometry padding;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding,
      child: Container(
        height: height,
        decoration: BoxDecoration(color: backgroundColor),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: Text(leftStr)),
                ],
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: Text(rightStr)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///
///
/// two page item
///

class ReceiveRulePageTimeBar extends StatelessWidget {
  ReceiveRulePageTimeBar(
      {Key key,
      this.backgroundColor,
      this.padding = const EdgeInsets.all(0.0),
      this.height = 50,
      this.leftStr = '',
      this.centerStr = '',
      this.rightStr = ''})
      : super(key: key);

  final Color backgroundColor;
  final String leftStr;
  final String centerStr;
  final String rightStr;
  final double height;
  final EdgeInsetsGeometry padding;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: padding,
      child: Container(
        height: height,
        decoration: BoxDecoration(color: backgroundColor),
        child: Row(
          children: <Widget>[
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: Text.rich(TextSpan(text: leftStr))),
                ],
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: Text(centerStr)),
                ],
              ),
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Center(child: Text(rightStr)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

///
///
///
///
class ReceiveRulePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('同存同取，到期本金自动转入到您的钱包。转出时仅支持转入原地址中。'),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('利息结算方式有两种：法币结算，积分结算。'),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text('利息结算日期根据您选择的产品结束的最后一天计算'),
          ),

          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[0].left,
            centerStr: receiveRuleMappingList[0].center,
            rightStr: receiveRuleMappingList[0].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),

          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[1].left,
            centerStr: receiveRuleMappingList[1].center,
            rightStr: receiveRuleMappingList[1].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[2].left,
            centerStr: receiveRuleMappingList[2].center,
            rightStr: receiveRuleMappingList[2].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),
          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[3].left,
            centerStr: receiveRuleMappingList[3].center,
            rightStr: receiveRuleMappingList[3].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[4].left,
            centerStr: receiveRuleMappingList[4].center,
            rightStr: receiveRuleMappingList[4].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: const Color(0xFFF6E9FF),
          ),
          ReceiveRulePageTimeBar(
            leftStr: receiveRuleMappingList[5].left,
            centerStr: receiveRuleMappingList[5].center,
            rightStr: receiveRuleMappingList[5].right,
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            backgroundColor: Colors.white,
          ),
          //todo austenCommit
        ],
      ),
    );
  }
}

///
/// CommonIssuesViewPage
///
///
class CommonIssuesViewPage extends StatelessWidget {
  List<ExpendItemInfo> _demoItems;

  @override
  Widget build(BuildContext context) {
    _demoItems = <ExpendItemInfo>[
      ExpendItemInfo(
          name: '黑名单用户如何理财？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
      ExpendItemInfo(
          name: '利息提现需要手续费吗？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
      ExpendItemInfo(
          name: '利息提现需要手续费吗？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
      ExpendItemInfo(
          name: '利息提现需要手续费吗？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
      ExpendItemInfo(
          name: '利息提现需要手续费吗？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
      ExpendItemInfo(
          name: '利息提现需要手续费吗？', content: '''黑灰名单用户加入理财产品可以获取收益，而且还能解除黑灰名单限制
      1、黑名单用户只能购买一年的产品，且存入积分量不低于20万。
      2、灰名单用户不能提前提取积分，只能等到相应的产品结束。
      '''),
    ];

    // TODO: implement build
    return Container(
      child: ListView(
        children: _demoItems.map((ExpendItemInfo info) {
          return ExpansionTile(
            title: Text(info.name),
            leading: Icon(Icons.looks_one),
            children: <Widget>[Text(info.content)],
          );
        }).toList(),
      ),
    );
  }
}

class ExpendItemInfo {
  ExpendItemInfo({this.name, this.content});

  final String name;
  final String content;
}
